<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/testPaper' }">试卷管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/testPaper/dateliTestPaper">试卷详情</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 查看试卷 -->
    <div v-loading="VLoading" v-if="tpexamine == 0" class="describe">
      <el-descriptions class="margin-top" title="试卷详情" :column="3" border>
        <template #extra>
          <el-button @click="tpupdate" :disabled="disabled" type="primary">修改</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">试卷名</div>
          </template>
          {{ tpname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">试卷标签</div>
          </template>
          <el-tag size="small">{{ tplable }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">总分</div>
          </template>
          <el-tag size="small">{{ tppoints }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">题目数量</div>
          </template>
          <el-tag size="small">{{ tpcount }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">及格分数</div>
          </template>
          <el-tag size="small">{{ tppass }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">试卷难度</div>
          </template>
          <el-tag size="small">{{ tplv }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">试卷描述</div>
          </template>
          {{ tpexplain }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 查看试卷 -->
    <!-- 修改试卷 -->
    <div v-if="tpexamine == 1" class="describe">
      <el-descriptions class="margin-top" title="试卷详情" :column="3" border>
        <template #extra>
          <el-button @click="tpsave" type="primary">保存</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">试卷名</div>
          </template>
          <el-input v-model="tpname" placeholder="" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">试卷标签</div>
          </template>
          <el-select v-model="tplable" placeholder="">
            <el-option label=".NET" value=".NET" />
            <el-option label="JAVA" value="JAVA" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">总分</div>
          </template>
          <el-input-number v-model="tppoints" disabled :min="1" :max="1000" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">题目数量</div>
          </template>
          <el-input-number v-model="tpcount" disabled :min="1" :max="1000" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">及格分数</div>
          </template>
          <el-input-number v-model="tppass" :min="1" :max="1000" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">试卷难度</div>
          </template>
          <el-input-number v-model="tplv" disabled :min="1" :max="1000" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">试卷描述</div>
          </template>
          <el-input v-model="tpexplain" type="textarea" />
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 修改试卷 -->
    <div class="tptable">
      <strong>试卷试题</strong>
      <div class="bankname">请输入试题名：</div>

      <div class="input">
        <el-input v-model="key" class="w-50 m-2" @change="search" placeholder="请输入想要查找的试题名" />
      </div>
      <div style="padding: 30px">
        <el-table v-loading="VLoading" :data="tableData" border style="width: 100%">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column prop="qcontent" label="题干" width="280" />
          <el-table-column type="expand">
            <template #default="props">
              <el-table :data="props.row.opiton">
                <el-table-column label="选项" prop="ocontent" />
                <el-table-column label="答案">
                  <template #default="scope">
                    <el-tag :type="scope.row.IsRigh == 0 ? 'danger' : 'primary'" disable-transitions>
                      {{ scope.row.IsRigh == 0 ? "错误" : "正确" }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="qexplain" label="描述" width="280" />
          <el-table-column label="等级">
            <template #default="scope">
              <el-tag disable-transitions>
                {{ scope.row.qlv }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布">
            <template #default="scope">
              <el-tag :type="scope.row.qisPublish === 0 ? 'warning' : 'success'" disable-transitions>{{
                  scope.row.qisPublish === 0 ? "否" : "是"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="禁用">
            <template #default="scope">
              <el-tag :type="scope.row.qisBan === 0 ? 'success' : 'warning'" disable-transitions>
                {{ scope.row.qisBan === 0 ? "否" : "是" }}
              </el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column label="使用">
            <template #default="scope">
              <el-tag disable-transitions>
                {{ scope.row.isUse }}
              </el-tag>
            </template>
          </el-table-column> -->
        </el-table>
        <div class="paging">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 50, 100]" :page-size="pages.limit" :total="pages.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { DateliTestPaper } from "@/utils/Exam/testPaper/dateliTestPaper";
import router from "@/router";
import { ElMessage } from "element-plus";
import { TaskPaper } from '@/api/Product/exaam'

const _exam = new TaskPaper();

export default defineComponent({
  setup() {
    const data = reactive<DateliTestPaper>({
      key: "",
      tpexamine: 0,
      tpexplain: "",
      tpname: "",
      tplable: ".NET",
      tppoints: 100,
      tpcount: 100,
      tppass: 60,
      tplv: 4,
      tpid: "",
      VLoading: true,
      disabled: true,
      testpaperdeta: [],
      pages: {
        page: 1,
        limit: 5,
        total: 10,
      },
      tableData: [],
    });
    const methods = {
      //修改试卷
      tpupdate() {
        data.tpexamine = 1;
      },
      //修改
      tpsave() {
        let dto = {
          tpid: data.tpid,
          tpname: data.tpname,
          tppasssocre: data.tppass,
          tplabels: data.tplable,
          tpexplain: data.tpexplain
        }
        _exam.UpdateTaskPaper(dto).then((res: any) => {
          if (res.code === 0) {
            ElMessage.success(res.message);
            router.push("/testPaper");
          }
        })

      },
      search(val: any) {
        data.key = val;
        methods.GetEchoTestPaper();
      },
      //获取单个
      GetEchoTestPaper() {
        data.VLoading = true
        _exam.UpdateEchoTaskPaper({
          tpid: data.tpid,
          page: data.pages.page,
          limit: data.pages.limit,
          key: data.key,
        }).then(res => {
          if (res.code === 0) {
            res.data.isPublish == 0 ? data.disabled = false : data.disabled = true
            data.VLoading = false
            data.tpname = res.data.data.tpname,
              data.tplable = res.data.data.tplabel,
              data.tppoints = res.data.data.score,
              data.tpcount = res.data.data.tpcount,
              data.tppass = res.data.data.passscore,
              data.tplv = res.data.data.tplv,
              data.tpexplain = res.data.data.tpexplain,
              data.tableData = res.data.data.question,
              data.pages.total = res.data.total
          }
        })
      },
      handleSizeChange(val: number) {
        data.pages.limit = val;
        methods.GetEchoTestPaper();
      },
      handleCurrentChange(val: number) {
        data.pages.page = val;
        methods.GetEchoTestPaper();
      },
    };
    onMounted(() => {
      data.tpid = (router.currentRoute.value.params.id).toString();
      setTimeout(() => {
        methods.GetEchoTestPaper();
      }, 100);
    });
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.tptable {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.bankname {
  display: inline-block;
  margin-left: 20px;
  padding: 5px;
}

.input {
  margin-left: 10px;
  width: 300px;
  display: inline-block;
}
</style>
